<template>
     <div class="jx-content">
        <div class="fileUploadBox">
            <button class="button-style uploadBtn">上传文件<input id="version-file-input" type="file" multiple="multiple" title="" auto-complete="off" @change="getFile"></button>
            <span v-if="versionFile!=''" >
                <span style='margin-top:10px;' >{{versionFile}}</span>
                <span class="look" @click="Fileshow">查看</span>
                <i class="iconfont icon-shanchu" @click="deleteFn"></i>
            </span>
            <span>重复率大于：</span>
            <el-select v-model="percentage" >
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
                <button class="button-style search" @click="search" v-if="versionFile!='' && percentage!='' " >查 询</button>
                <button class="darksearch" v-if="versionFile=='' ">查 询</button>
        </div>
        <p class="tips">提示：请上传zip或者rar文件，当前只对doc和docx类型的文件进行重复率对比。</p>
        <div class="table">
            <el-table :data="tableData"  empty-text="无文件重复率大于该数值 " style="width: 100%">
                <el-table-column label="序号" width="100px"  type="index"> </el-table-column>
                <el-table-column prop="file" label="文件名" width="400px"></el-table-column>
                <el-table-column prop="comparedFile" label="对比文件" width="400px" ></el-table-column>
                <el-table-column prop="similarity" label="相似度" ></el-table-column>
            </el-table>
        </div>
         <el-dialog :close-on-click-modal="false" title="文件查看"  :visible.sync="dialogVisible" width="400px" >
             <el-tree :data="data" :props="defaultProps" default-expand-all ></el-tree>
         </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                options: [{
                    value: '0.9',
                    label: '90%'
                    }, {
                    value: '0.8',
                    label: '80%'
                    }, {
                    value: '0.7',
                    label: '70%'
                    }, {
                    value: '0.6',
                    label: '60%'
                    },
                     {
                    value: '0.5',
                    label: '50%'
                    },
                     {
                    value: '0.4',
                    label: '40%'
                    },
                     {
                    value: '0.3',
                    label: '30%'
                    },
                     {
                    value: '0.2',
                    label: '20%'
                    }, {
                    value: '0.1',
                    label: '10%'
                }],
                percentage: '',
                versionFile:'',
                tableData:[],
                dialogVisible:false,
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
                data:[]
            }
        },
        methods:{
            search(){
               let self = this
                self.$http.get('/tes/doc-check?similarity='+self.percentage).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         self.tableData = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //文件上传
            getFile($event){
                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                let fileSize =  $event.target.files[0].size
                let  size = fileSize/ 1024
                if(fileType != 'rar' && fileType != "zip"){
                    this.$message.error('请上传zip 或者rar文件')
                    return
                }else if(size>200000){
                    this.$message.error('文件不能大于200MB,请重新选择！')
                    return
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                // console.log( this.versionFile)
                 let formData = new FormData();
                 formData.append('file', $event.target.files[0]); 
                 this.$http.post('/tes/doc-check/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        this.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close() 
                        this.versionFile = $event.target.files[0].name  
                         $event.target.value=''        
                    }else{
                         $event.target.value=''  
                         this.$message(res.message)
                         loading.close()
                    }
                 })
                 
            },
            //文件查看
            Fileshow(){
                this.dialogVisible=true
                let self = this
                self.$http.get('/tes/doc-check/view').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.data = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //删除
            deleteFn(){
                let self = this;
                
                self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
                }).then(() => {
                 const loading = this.$loading({
                    lock: true,
                    text: '文件删除中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                self.$http.delete('/tes/doc-check').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                         self.versionFile=''
                         self.percentage=''
                         self.tableData=[]
                         loading.close()   
                        
                    }else{
                        loading.close()   
                        self.$message.error(res.message)
                    }
                 })
                })
            }
           
            
        }
    }
</script>
<style scoped>
  .el-tree>>>.el-tree-node__label{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
        width: 500px
  }
</style>
<style scoped lang="scss">
 @import "./../../../styles/layout/color_variables";
.jx-content{
    margin-top: 30px;
    .tips{
          margin-bottom: 35px;
          color: #1277eb;
       }
   .fileUploadBox{
       margin-bottom: 30px;
      
       #version-file-input{
            position: absolute;
            left: 0;
            opacity: 0;
            height: 30px;
            top: 0px;
            width: 90px;
             cursor: pointer;
        }
       .uploadBtn{
            margin-right: 30px;
            position: relative;
           
        }
        .icon-shanchu{
              color: $blue;
              font-size: 20px;
              vertical-align: sub;
              cursor: pointer;
              margin-right: 25px;
        }
        .look{
             color: $blue;
             cursor: pointer;
        }
        .search{
            margin-left: 10px;
        }
        .darksearch{
            border: 1px solid #c9c9c9;
            height: 32px;
            width: auto;
            text-align: center;
            vertical-align: middle;
            line-height: 30px;
            color: #c9c9c9;
            cursor: pointer;
            border-radius: 20px;
            padding: 0 16px;
            font-size: 14px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 10px;
        }
   }

}
</style>
